<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>3D Buildings Visualization</title>
		<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	</head>
	<body>
		<!-- 图表容器 -->
		<div id="main" style="width: 900px; height: 600px;"></div>

		<script type="module">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom, 'dark');
			var option;
			
			$.getScript(
			  'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
			).done(function () {
			  var noise = new SimplexNoise(Math.random);
			  function generateData() {
			    var data = [];
			    for (var i = 0; i <= 50; i++) {
			      for (var j = 0; j <= 50; j++) {
			        var value = noise.noise2D(i / 20, j / 20);
			        data.push([i, j, value * 2 + 2]);
			      }
			    }
			    return data;
			  }
			  var data = generateData();
			  myChart.setOption(
			    (option = {
			      visualMap: {
			        show: false,
			        min: 2,
			        max: 6,
			        inRange: {
			          color: [
			            '#313695',
			            '#4575b4',
			            '#74add1',
			            '#abd9e9',
			            '#e0f3f8',
			            '#ffffbf',
			            '#fee090',
			            '#fdae61',
			            '#f46d43',
			            '#d73027',
			            '#a50026'
			          ]
			        }
			      },
			      xAxis3D: {
			        type: 'value'
			      },
			      yAxis3D: {
			        type: 'value'
			      },
			      zAxis3D: {
			        type: 'value',
			        max: 10,
			        min: 0
			      },
			      grid3D: {
			        axisLine: {
			          lineStyle: { color: '#fff' }
			        },
			        axisPointer: {
			          lineStyle: { color: '#fff' }
			        },
			        viewControl: {
			          // autoRotate: true
			        },
			        light: {
			          main: {
			            shadow: true,
			            quality: 'ultra',
			            intensity: 1.5
			          }
			        }
			      },
			      series: [
			        {
			          type: 'surface',
			          data: data,
			          shading: 'realistic'
			        }
			      ],
				animation: true, // 启用动画
				animationDurationUpdate: 500, // 动画更新时长
				animationEasingUpdate: 'linear' // 使用线性过渡，保证平滑效果
			    })
			  );
			});
			
			option && myChart.setOption(option);

		</script>
	</body>
</html>